<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>版块</el-breadcrumb-item>
      <el-breadcrumb-item>帖子</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <el-row class="row_wrap">
        <el-col class="topic_wrap">
          <div class="topic topic_header" v-html="tz_showvalTit"></div>
          <el-divider class="line"></el-divider>
          <div class="inner_topic " v-html="tz_showval"></div>
          <!-- <mavon-editor v-model="tz_showval" :toolbars="markdownOption"></mavon-editor> -->
        </el-col>
      </el-row>
      <el-row :gutter="20" class="post_row" v-if="showFlag">
        <el-col :span="12">
          <el-input v-model="post_val" placeholder="回复"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleReply">回复</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 评论区 -->
    <el-card v-if="replies.length">
      <div slot="header">
        <span>评论</span>
      </div>
      <el-row class="replies" v-for="(item, index) in replies" :key="index">
        <el-col :span="1">
          <div @click="goUser(item)">
            <el-avatar :src="item.author.avatar_url" :size="'large'"></el-avatar>
          </div>
        </el-col>
        <el-col :span="12" class="info_r">
          <div class="top">
            <a href="javascript:;" @click="goUser(item)">{{ item.author.loginname }}</a>
            <span>{{ index + 1 }} 楼</span>
            <span>发表于 {{ item.create_at | formatCDate }}</span>
          </div>
          <div class="bot" v-html="item.content">
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { Session } from '../../assets/js/lib.js'
import $ from 'jquery'
export default {
  data () {
    return {
      tz_showvalTit: '',
      tz_showval: '',
      markdownOption: {
        subfield: false,
        defaultOpen: 'preview',
        toolbarsFlag: false,
        editable: false,
        boxShadow: false // 边框
      },
      post_val: '',
      detailTopObj: {}, // 详情
      replies: [], // 回复数组
      showFlag: JSON.parse(Session.get('token'))
    }
  },
  watch: {
  },
  props: ['id', 'topicLs'],
  created () {
    this.$http.get(`/topic/${this.id}`)
      .then(res => {
        // console.log(res.data.data)
        this.replies = res.data.data.replies
      })
    this.detailTopObj = this.topicLs
    this.tz_showvalTit = `<h2>${this.topicLs.title}</h2>`
    this.tz_showval = this.topicLs.content
    // this.detailTopObj = this.$route.params.topicLs
    // console.log(this.$route.params.topicLs)
  },
  mounted () {
    $('.inner_topic a').attr('target', '_blank').css('color', '#08c')
  },
  computed: {
    ...mapState(['topicList'])
  },
  methods: {
    // 点击回复
    handleReply () {
      const d = new Date()
      const time = d.toLocaleString().replace('下午', '')
      // console.log(time)
      const val = this.post_val.trim()
      if (!val.length) {
        return
      }
      const obj = {
        id: this.id,
        author: {
          loginname: '游客',
          avatar_url: ''
        },
        content: val,
        create_at: new Date(time).toJSON()
      }
      // 添加回复数据
      this.replies.push(obj)
      // 清空文本框
      this.post_val = ''
    },
    goUser (item) {
      this.$router.push({
        name: 'user',
        params: {
          name: item.author.loginname,
          user: item
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 20px;
}

.post_row {
  margin-top: 20px;
}

.top a {
  color: #1c9ce4;
}

.top span {
  padding: 0 10px;
  color: #999;
  font-size: 12px;
}

.bot {
  margin-top: 10px;
}

.topic_wrap {
  border-radius: 10px;
  .line {
    margin: 0;
  }
}

.topic_header, .inner_topic {
  padding: 10px 20px;
}

.replies {
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

@media screen and (max-width: 1000px) {
  .info_r {
    margin-left: 15px;
  }
}
</style>
